/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect } from "react";
import styles from "./index.module.less";
import { CloseOutlined } from "@ant-design/icons";
import { useBoolean } from "ahooks";

interface IProps {
  data: any;
}

function ErrorMessage(props: IProps) {
  const { data } = props;
  const [flag, toggle] = useBoolean(false);

  useEffect(() => {
    if (data) {
      toggle.setTrue();
      return
    }
    toggle.setFalse();
  }, [data, toggle]);
  return (
    <React.Fragment>
      {flag && (
        <div className={styles.errorMessage}>
          {data}
          <div
            className={styles.close}
            onClick={() => {
              toggle.setFalse();
            }}
          >
            <CloseOutlined />
          </div>
        </div>
      )}
    </React.Fragment>
  );
}
export default ErrorMessage;
